import React from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
  RefreshControl,
  StyleSheet,
  useColorScheme,
} from 'react-native';
import { useTasks, useRefresh } from '../hooks';
import { Task, TabScreenProps } from '../types';

type TodoScreenProps = TabScreenProps<'Todo'>;

const TodoScreen: React.FC<TodoScreenProps> = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const {
    tasks,
    currentTask,
    editingTaskId,
    setCurrentTask,
    handleAddTask,
    handleEditTask,
    handleDeleteTask,
    handleToggleTask,
  } = useTasks();
  const { refreshing, refreshTasks } = useRefresh();

  const renderTaskItem = ({ item }: { item: Task }) => (
    <View style={styles.taskItem}>
      <TouchableOpacity
        style={[styles.checkbox, item.completed && styles.checkboxChecked]}
        onPress={() => handleToggleTask(item.id)}
      />
      <View style={styles.taskContent}>
        <Text
          style={[
            styles.taskText,
            item.completed && styles.taskTextCompleted,
            isDarkMode && styles.lightText,
          ]}
        >
          {item.title}
        </Text>
        <Text style={styles.taskTime}>{item.createdAt}</Text>
      </View>
      <View style={styles.taskButtons}>
        <TouchableOpacity
          style={[styles.taskButton, styles.editButton]}
          onPress={() => handleEditTask(item.id)}
        >
          <Text style={styles.buttonText}>编辑</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.taskButton, styles.deleteButton]}
          onPress={() => handleDeleteTask(item.id)}
        >
          <Text style={styles.buttonText}>删除</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={[styles.input, isDarkMode && styles.inputDark]}
          placeholder="输入新任务..."
          placeholderTextColor={isDarkMode ? '#888' : '#999'}
          value={currentTask}
          onChangeText={setCurrentTask}
        />
        <TouchableOpacity style={styles.addButton} onPress={handleAddTask}>
          <Text style={styles.addButtonText}>
            {editingTaskId ? '更新' : '添加'}
          </Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={renderTaskItem}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={refreshTasks} />
        }
        ListEmptyComponent={
          <Text style={[styles.emptyText, isDarkMode && styles.lightText]}>
            暂无待办事项，下拉刷新或添加新任务
          </Text>
        }
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.listContentStyle}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  listContentStyle: {
    paddingBottom: 40,
  },
  pageTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#000',
  },
  lightText: {
    color: '#fff',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  input: {
    flex: 1,
    height: 48,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    backgroundColor: '#fff',
    marginRight: 8,
    color: '#333',
  },
  inputDark: {
    backgroundColor: '#333',
    borderColor: '#555',
    color: '#fff',
  },
  addButton: {
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderRadius: 8,
  },
  addButtonText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  taskItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 8,
    marginBottom: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: '#2196F3',
    marginRight: 12,
  },
  checkboxChecked: {
    backgroundColor: '#2196F3',
  },
  taskContent: {
    flex: 1,
  },
  taskText: {
    fontSize: 16,
    color: '#333',
    marginBottom: 4,
  },
  taskTextCompleted: {
    textDecorationLine: 'line-through',
    color: '#888',
  },
  taskTime: {
    fontSize: 12,
    color: '#999',
  },
  taskButtons: {
    flexDirection: 'row',
  },
  taskButton: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
    marginLeft: 8,
  },
  editButton: {
    backgroundColor: '#4CAF50',
  },
  deleteButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    color: '#fff',
    fontSize: 12,
  },
  emptyText: {
    textAlign: 'center',
    marginTop: 50,
    color: '#888',
    fontSize: 16,
  },
});

export default TodoScreen;